<template>
	<view class="page">
		<view class="listall">
			<v-gap color="#EDF5F5" />
			<view class="d-flex flex-column listsee" v-for="(item,index) in classData" :key="index" @click="onClick(item,index)">
				<view class="d-flex flex-row justify-space-between">
					<view class="d-flex flex-row align-center">
						<view class="">
							<image style="width: 80rpx;height: 80rpx;" :src="item.cover" mode=""></image>
						</view>
						<view class="d-flex flex-column" style="margin-left: 20rpx;">
							<view class="" style="font-size: 26rpx;">
								{{item.name||''}}
							</view>
							<view class="d-flex flex-row justify-center"
								style="margin-top: 10rpx;justify-content: flex-start;">
								<!-- <view class=""
									style="width: 80rpx;height: 40rpx;background: #edffeb;color: #7cc57e;font-size: 24rpx;text-align: center;margin-right: 20rpx;line-height: 40rpx;">
									新报
								</view> -->
								<view class="" style="font-size: 24rpx;">
									剩余{{item.left_num||0}}次
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;flex-direction: column;">
						<view style="display: flex;justify-content: flex-end;">
							<view class="" v-if="item.stu_hour_num"
								style="width: 140rpx;height: 40rpx;background: #edffeb;color: #7cc57e;font-size: 24rpx;text-align: center;line-height: 40rpx;">
								总{{item.stu_hour_num||0}}次
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<view class="" style="font-size: 24rpx;margin-top: 10rpx;" v-if="item.channel_name">
								{{item.channel_name}}
							</view>
						</view>

					</view>
				</view>
				<!-- <view class="d-flex flex-row align-center" style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;">
					<image class="" style="width: 20rpx;height: 20rpx;"
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" />
					<view class="" style="margin-left: 10rpx;font-size: 24rpx; color: #b8b8b8;">
						2023-12-01 至 2024-06-30
					</view>
				</view> -->
				<!-- <view class="d-flex flex-row align-center" style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;" v-if="item.train_item_name">
					<view class="" style="margin-left: 10rpx;font-size: 24rpx; color: #b8b8b8;">
						{{item.train_item_name||''}}
					</view>
				</view> -->
				<view class="d-flex flex-row justify-start align-center"
					style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;">
					<view class="d-flex flex-row align-center"
						style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;" v-if="item.train_item_name">
						<!-- <image class="" style="width: 20rpx;height: 20rpx;"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" /> -->
						<view class="" style="font-size: 24rpx; color: #b8b8b8;">
							{{item.train_item_name||''}}
						</view>
					</view>
					<view class="d-flex flex-row align-center"
						style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;margin-left: 20rpx;" v-if="item.area_name">
						<!-- <image class="" style="width: 20rpx;height: 20rpx;"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" /> -->
						<view class="" style="margin-left: 10rpx;font-size: 24rpx; color: #b8b8b8;">
							{{item.area_name||''}}
						</view>
					</view>
					<view class="d-flex flex-row align-center"
						style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;margin-left: 20rpx;"
						v-if="item.coach_name">
						<!-- <image class="" style="width: 20rpx;height: 20rpx;"
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a70accdc329c0011116ca9/16731594764081021110.png" /> -->
						<view class="" style="margin-left: 10rpx;font-size: 24rpx; color: #b8b8b8;">
							{{item.coach_name||''}}
						</view>
					</view>
				</view>
				<view class="d-flex flex-row justify-space-between align-center"
					style="font-size: 24rpx;color: #9e9e9e;line-height: 50rpx;">
					<view class="d-flex flex-row flex-center ">
						<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" :src="item.head_img" mode="">
						</image>
						<view class="d-flex flex-column" style="margin-left: 10rpx;">
							<view class="">
								{{item.student_name||''}} {{item.mobile||''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;height: 120rpx;"></view>
		</view>
	</view>
</template>

<script>
	const index = require("@/api/personal/index.js");
	export default {
		data() {
			return {
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				hylist: [],
				classData:[]
			}
		},
		onLoad() {
			this.getMyClasslist()
		},
		methods: {
			async getMyClasslist() {
				let that = this;
				if (that.listQuery.pageNo === 1) that.classData = [];
				let params = {
					// student_id: this.forlist.id,
					appid: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					openid: uni.getStorageSync("openid"),
					user_id: uni.getStorageSync("phone"),
					status: this.currentTablist,
					pageSize: this.listQuery.pageSize,
					page: this.listQuery.pageNo,
				};
				let res = await index.trainMyClass(params);
				if (res.code === 1) {
					console.log(that.classData, '444')
					// this.classDatalist = res.data.classData;
					that.classData = that.classData.concat(res.data.classData.data); //将数据拼接在一起
					that.totalPage = res.data.classData.last_page
					console.log(that.classData, '666')
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getMyClasslist()
			},
			onClick(item,index) {
				uni.navigateTo({
					url: './class-detail/class-detail?student_id=' + item.applicant + '&id=' + item.id,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #EDF5F5;
		position: relative;

		.listall {
			margin-bottom: 100rpx;

			.listsee {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				width: 96%;
				margin-left: 2%;
				border: 2rpx #fff solid;
				margin-top: 20rpx;
			}

			.active1 {
				border: 2rpx #0000ff solid;
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_4 {
			width: 90%;
			height: 70rpx;
			background: #3dabff;
			border-radius: 10rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
			line-height: 70rpx;
			margin-bottom: 20rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}

		.box_20 {
			background-color: rgba(0, 0, 0, 1);
			border-radius: 10rpx;
			position: absolute;
			width: 165rpx;
			height: 105rpx;
			flex-direction: row;
			display: flex;
			right: 35rpx;
			top: 100rpx;
			z-index: 998;

			.image-text_4 {
				width: 34rpx;
				height: 62rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 20rpx 0 0 28rpx;
			}

			.icon_5 {
				width: 30rpx;
				height: 30rpx;
				margin-left: 2rpx;
			}

			.text-group_4 {
				width: 34rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 14rpx;
			}

			.image-text_5 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 17rpx 0 0 37rpx;
			}

			.icon_67 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_5 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image-text_6 {
				width: 36rpx;
				height: 65rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 18rpx 0 0 37rpx;
			}

			.icon_7 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 2rpx;
			}

			.text-group_6 {
				width: 36rpx;
				height: 18rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 18rpx;
				font-family: PingFang-SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
				margin-top: 15rpx;
			}

			.image_4 {
				position: absolute;
				left: 125rpx;
				top: -13rpx;
				width: 28rpx;
				height: 14rpx;
			}
		}

	}
</style>